<template>
  <div>
    <div class="wrapper" v-if="user">
      <div class="userBox">
        <div class="leftCont">
          <img :src="user.wechatHeadImg || require('@/assets/images/user/touxiang@3x.png')" @error="_loadError2($event)">
        </div>
        <div class="rightCont">
          <div class="strText">{{user.username}}</div>
          <div>{{user.userType === 1 ? '普通用户' : '经纪人用户'}}</div>
          <div>余额: {{user.amount}} <span @click="accountShow = true" class="right">提现</span></div>
          <div>{{user.mobile ? user.mobile : '未绑定手机号'}} <span v-if="!user.mobile"  @click="$router.push('/login?type=bind')" class="right">去绑定</span></div>
        </div>
      </div>
      <div class="userManagement">
        <div class="userlist" @click="() => $router.push('/mine/appoint')">
          <div class="line" >
            <div class="leftC">
              <div class="text">
                我的预约
              </div>
            </div>
            <div class="rightC">
              <img class="iconC" src="~@/assets/images/user/xiayiye@3x.png" >
            </div>
          </div>
        </div>
        <div class="userlist" @click="() => $router.push('/mine/collect')">
          <div class="line" >
            <div class="leftC">
              <div class="text">
                我的收藏
              </div>
            </div>
            <div class="rightC">
              <img class="iconC" src="~@/assets/images/user/xiayiye@3x.png" >
            </div>
          </div>
        </div>
        <div class="userlist" v-if="user.userType === 2" @click="() => $router.push('/mine/history?type=order')">
          <div class="line" >
            <div class="leftC">
              <div class="text">
                成交订单
              </div>
            </div>
            <div class="rightC">
              <img class="iconC" src="~@/assets/images/user/xiayiye@3x.png" >
            </div>
          </div>
        </div>
        <div class="userlist" v-if="user.userType === 2" @click="() => $router.push('/mine/visit?type=visit')">
          <div class="line" >
            <div class="leftC">
              <div class="text">
                带看记录
              </div>
            </div>
            <div class="rightC">
              <img class="iconC" src="~@/assets/images/user/xiayiye@3x.png" >
            </div>
          </div>
        </div>
        <div class="userlist" v-if="user.userType === 2" @click="() => $router.push('/mine/report?type=report')">
          <div class="line" >
            <div class="leftC">
              <div class="text">
                报备记录
              </div>
            </div>
            <div class="rightC">
              <img class="iconC" src="~@/assets/images/user/xiayiye@3x.png" >
            </div>
          </div>
        </div>
        <div class="userlist" v-if="user.userType === 2" @click="() => $router.push('/mine/team')">
          <div class="line" >
            <div class="leftC">
              <div class="text">
                我的团队
              </div>
            </div>
            <div class="rightC">
              <img class="iconC" src="~@/assets/images/user/xiayiye@3x.png" >
            </div>
          </div>
        </div>
        <!-- <div class="userlist" >
          <div class="line"  @click="logout">
            <div class="leftC">
              <div class="text">
                退出登录
              </div>
            </div>
            <div class="rightC">
              <img class="iconC" src="~@/assets/images/user/xiayiye@3x.png" >
            </div>
          </div>
        </div> -->
      </div>
      <van-dialog
        v-model="accountShow"
        title="提现金额"
        @confirm="withdraw"
        show-cancel-button
      >
        <van-field class="textinput" type="number" v-model="userAccountWithdraw" placeholder="请输入提现金额" />
      </van-dialog>
    </div>
  </div>
</template>

<script>
import { mineApi } from '@/api'
import { XInput } from 'vux'
import { mapGetters, mapActions } from 'vuex'

export default {
  components: {
    XInput
  },
  async mounted() {
    if (!this.token) {
      this.$router.push('/login')
    }
    const res = this.GetUserInfo()
    console.log('res', res)
    // this.userInfo = res.data
  },
  computed: {
    ...mapGetters([
      'token',
      'user'
    ])
  },
  data() {
    return {
      topResource: {
        centerCont: ''
      },
      userInfo: {

      },
      accountShow: false,
      userAccountWithdraw: undefined,
      inviteCode: '',
      inviteInfo: {}
    }
  },
  methods: {
    _loadError2(event) {
      console.log('event', event)
      event.target.src = require('@/assets/images/user/touxiang@3x.png')
      // ~@/assets/images/detail/btn_found_friends.png
    },
    login() {
      console.log('login')
      this.$router.push('/home')
    },
    async withdraw() {
      const res = await mineApi.withdraw({
        account: this.userAccountWithdraw
      })
      if (res.code !== 200) {
        return
      }
      this.userAccountWithdraw = undefined
      this.$toast('提现成功')
    },
    logout() {
      const _this = this
      this.$dialog.confirm({
      // 组件除show外的属性
        title: '退出登录',
        message: `是否确认退出登录?`
      }).then(() => {
        _this.$store.dispatch('LogOut').then(() => {
          _this.$router.push('/login')
        })
      }).catch(() => {
        // on cancel
      })
    },
    ...mapActions([
      'GetUserInfo'
    ])
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/assets/css/mixin.scss";
@import 'src/assets/css/variables.scss';
  .wrapper {
    background: #f9f9f9;
    overflow: hidden;
    width: 100%;
    /*background-color: #000;*/
    .loadmore-content{
      padding: 0;
      margin: 0;
      height: 100%;
    }
    .userBox{
      display: flex;
      padding: 30px 20px;
      background-color: #fff;
      box-shadow: 0px 5px 5px #f0f0f0;
      margin-bottom: 20px;
      align-items: center;

      .leftCont{
        img{
          width: 90px;
          height: 90px;
          border-radius: 5px;
          object-fit: cover;
          margin-right: 20px;
        }
      }
      .rightCont{
        font-size: 14px;
        flex: 1;
        div{
          line-height: 24px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          span{
            color: orange;
            text-decoration: underline;
          }
        }
        .strText{
          color: orange;
          font-size: 16px;
          font-weight: bold;
        }
      }
    }
    .userManagement{
      padding: 0 10px;
      background-color: #fff;
      .userlist{
        padding: 10px 0;
        border-bottom: 1px solid #efefef;
        .line{
          font-size: 14px;
          width: 100%;
          line-height: 30px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .leftC{
            display: flex;
            justify-content: space-between;
            align-items: center;
            .iconC{
              width: 20px;
              margin: 5px;
            }
            .text{
              margin-left: 5px;
            }
          }
          .rightC{
            display: flex;
            justify-content: space-between;
            align-items: center;
            .iconC{
              width: 6px;
              margin: 5px;
            }
          }
        }
        .btnColumn{
          margin-top: 10px;
          border-top: 1px solid #efefef;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .leftC, .rightC{
            flex: 0 0 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 40px;
            img{
              width: 20px;
              margin: 5px;
            }
          }
        }
      }
    }
  }
</style>
